<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
	<meta name="viewport3" content="width=device-width, initial-scale=1.0">
	<title>Napi</title>
</head>
<style type="text/css">
        body {
			background-color: #000000;
			margin:0 auto;
			font-family: Consolas, sans-serif;
		}
        a  {
			text-decoration: none;
		}

    table {
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        text-align: center;
    }
    
    table th {
        border-left: 1px solid #ffffff;
        border-top: 1px solid #ffffff;
    }
    
    table td {
        border-left: 1px solid #ffffff;
        border-top: 1px solid #ffffff;
    }

		button.button {
			background-color: #ffffff;
            font-family: Consolas, sans-serif;
            font-size: 16px;
            border-radius: 3px;
            border-color: #C4C4C4;
            align-self: center;
            border: 1px solid #C4C4C4;
            outline: none;
			width: 100px; 
			height:24px
		}

		button.button:hover {
			background: #4B97D9;
			color: #fff;
			border: 0px;
			font-family: Consolas, sans-serif;
            font-size: 16px;
			width: 100px; 
			height: 24px
		}

		input.text:focus {
			outline: 2px solid #4B97D9;
  			border: 0px;
        }

		input.text {
			outline: 2px solid #C4C4C4;
			border: 0px;
		}
    .tabs{
        position: relative;
        height: 800px;
        min-height: 800px;
        max-height: 800px;
        clear: both;
        margin: 25px 0;
        overflow: hidden;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid;
        margin-left: -1px;
        z-index: 2;
        color: #333333;
        background: white;
    }
    input.text {
		width: 250px;
        height: 18px; 
        vertical-align:middle;
		}
    .highlight {
        background-color: rgb(55, 63, 57);
    }
    .content{
        position: absolute;
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        padding: 20px 20px;
        border: 0px solid #ccc;
        max-height: 800px;
        overflow: scroll;
    }
    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
        z-index: 1;
    }
</style>
<script type="text/javascript">
    let vscode = acquireVsCodeApi();
    let clickIndex = -1; // 用户点击的那一项数据索引号
    let updateIncludeName = '';
    let updateCppName = '';
    let updateInterfaceName = '';
    let updateServiceCode = '';

    function configInfo(mode) {
      vscode.postMessage({
        msg: 'configInfo',
        type: mode,
        index: clickIndex,
        updateInfo: getUpdateInfo()
      });
    }

    // 删除数据
    function deleteItem() {
      vscode.postMessage({
        msg: 'deleteData',
        index: clickIndex
      });
    }

    function cancel() {
      var result = {
         msg: 'cancelShowInfo'
      };
      vscode.postMessage(result);
    }

    function setIndex(index) {
      clickIndex = index;
    }

    function getIndex() {
      return clickIndex;
    }

    function setUpdateInfo(includeName, cppName, interfaceName, serviceCode) {
      updateIncludeName = includeName;
      updateCppName = cppName;
      updateInterfaceName = interfaceName;
      updateServiceCode = serviceCode;
    }

    function getUpdateInfo() {
      let updateData = {updateIncludeName, updateCppName, updateInterfaceName, updateServiceCode};
      return updateData;
    }

    // 高亮点击的项，其他项不高亮
    function highlightItem(container, index) {
      const listItems = container.getElementsByTagName('tr');
      Array.from(listItems).forEach((item, i) => {
        if (i === index) {
          item.classList.add('highlight');
        } else {
          item.classList.remove('highlight');
        }
      });
    }

    function renderList(configList, listElement) {
      configList.forEach((configItem, index) => {
        const listItem = document.createElement('tr');
        const itemContent1 = document.createElement('th');
        itemContent1.textContent = configItem.includeName;
        const itemContent2 = document.createElement('th');
        itemContent2.textContent = configItem.cppName;
        const itemContent3 = document.createElement('th');
        itemContent3.textContent = configItem.interfaceName;
        const itemContent4 = document.createElement('th');
        itemContent4.textContent = configItem.serviceCode;
        listItem.appendChild(itemContent1);
        listItem.appendChild(itemContent2);
        listItem.appendChild(itemContent3);
        listItem.appendChild(itemContent4);

        listItem.addEventListener('click', () => {
          highlightItem(listElement, index);
          setIndex(index);
          setUpdateInfo(configItem.includeName, configItem.cppName, configItem.interfaceName, configItem.serviceCode);
        });
        listElement.appendChild(listItem);
      });
    }
    
    window.addEventListener('message', event => {
      const message = event.data;
      // 初始化
      if (message.msg === 'initShowInfo') {
        const listElement = document.getElementById('configList');
        renderList(message.configList, listElement);
      } else if (message.msg === 'deleteData') {
        const listElement = document.getElementById('configList');
        while (listElement.firstChild) {
          listElement.removeChild(listElement.firstChild);
        }
        renderList(message.configList, listElement);
      }
    });

</script>
<body>
  <h1>showInfo</h1>
  <table id = "table" width="600" cellspacing = "0">
    <thead>
      <tr>
        <th>includeName</th>
        <th>cppName</th>
        <th>interfaceName</th>
        <th>serviceCode</th>
      </tr>
    </thead>
    <tbody id = "configList">
        <!-- 配置项从这里动态插入 -->
    </tbody>
  </table>
  <button onclick="configInfo('add')" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Add</button>
  <button onclick="configInfo('update')" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Update</button>
  <button onclick="deleteItem()" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Delete</button>
  <button onclick="cancel()" type="button" class="button" style="border-spacing:0px 5px; margin-top: 20px; background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
</body>
</html>